:deep(.ant-modal) {
    .ant-modal-content {
        padding: 0 !important;
        border-radius: 4px;
        .ant-modal-header {
            height: 48px;
            line-height: 48px;
            padding: 0 24px;
            background: #f6f8fc;
            .ant-modal-title {
                height: 100%;
                line-height: 48px;
                color: #1f2329;
                font-size: 16px;
                font-weight: 700;
            }
        }
        .ant-modal-body {
            padding: 24px;
            .ant-form {
                .ant-form-item {
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
            .ant-form-item-label {
                label {
                    font-weight: 700 !important;
                    color: #1f2329 !important;
                }
            }
        }
        .ant-modal-footer {
            margin-top: 0;
            padding: 0 24px 24px;
        }
    }
    .ant-modal-close {
        &:hover {
            background-color: transparent !important;
        }
    }
    .ant-modal-close-x {
        color: $primary-color;
        font-size: 18px;
        margin-top: -8px;
    }
}

:deep(button) {
    box-shadow: none !important;
}

.page-container {
    height: 100%;
    border-top-left-radius: 24px;
    background: #f6f9ff url("@/assets/Lw/page-bg.png") no-repeat top left/410px;
    flex: 1;
    position: relative;
    .page-title {
        padding: 24px 32px;
        height: 108px;
        position: relative;
        box-sizing: border-box;
        border-bottom: 1px solid #dce0e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
            font-weight: 700;
            font-size: 24px;
            line-height: 28px;
            span {
                color: #2d51a0;
            }
            .routes {
                color: #6f7885;
                font-size: 14px;
                line-height: 20px;
                margin-top: 12px;
                font-weight: 400;
            }
            .name {
                display: flex;
                align-items: center;
                img {
                    width: 24px;
                    margin-left: 8px;
                }
            }
        }
        .search-box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 460px;
            z-index: 1;

            :deep(.ant-input) {
                height: 46px;
            }
            :deep(input) {
                border: none;
                box-shadow: none;
                &::placeholder {
                    color: #9097a3;
                    font-size: 16px;
                }
            }
            :deep(.ant-input-group-addon) {
                border: none;
                button {
                    height: 46px;
                    box-shadow: none;
                }
            }
        }
        > button {
            height: 40px;
            padding: 0 24px;
            font-weight: 500;
        }
    }
}

.status-btn {
    color: #fff;
    padding: 1px 8px;
    box-shadow: none;
    border: none;
    height: auto;
    &.status-btn__success {
        background: #5077c8;
    }
    &.status-btn__error {
        background: #9097a3;
    }
}

:deep(.ant-table) {
    color: #3d3d3d !important;
    .ant-table-thead {
        background: #dce4f4;
        .ant-table-cell {
            background: transparent;
            padding: 10px 16px !important;
            &::before {
                display: none;
            }
        }
    }
    .ant-table-tbody {
        .table-striped {
            background: #f6f8fc;
        }
        tr {
            &:hover {
                background: #f2f3f5;
            }
            .ant-table-cell {
                padding: 10px 16px !important;
            }
        }
    }
    .btns {
        button {
            padding: 0px 10px !important;
            height: auto;
        }
        .ant-divider {
            margin: 0px;
        }
    }
}

.text__btn--primary {
    color: #2d51a0 !important;
    padding: 4px 10px;
}
.table-box {
    .search-box {
        margin-bottom: 16px;
        .ant-form-item {
            background: #fff;
            padding: 0px 12px;
        }
        input {
            border: none;
            box-shadow: none;
        }
        :deep(.ant-select-selector) {
            border: none !important;
            box-shadow: none !important;
        }
        :deep(.ant-picker) {
            border: none !important;
            box-shadow: none !important;
        }
        :deep(.ant-picker) {
            width: 240px !important;
            input {
                width: 0 !important;
            }
        }
    }
    :deep(.ant-pagination) {
        margin: 24px 0 !important;
        justify-content: center;
    }
}

:deep(.ant-drawer) {
    .ant-drawer-header {
        background: #f6f8fc;
        padding: 22px 32px;
        position: relative;
        border: none;
        .ant-drawer-title {
            font-weight: 700;
            font-size: 18px;
            color: #3d3d3d;
        }
    }
    .ant-drawer-footer {
        height: 80px;
        box-sizing: border-box;
        button {
            height: 40px;
            padding: 0 24px;
        }
    }
    .ant-drawer-close {
        position: absolute;
        right: 32px;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 0;
        padding: 0;
        font-size: 20px;
        color: $primary-color;
    }
    .ant-form-item-label {
        label {
            font-weight: 700 !important;
            color: #1f2329 !important;
        }
    }
}
